<template>
    <!-- 新建仪表板 -->
    <div class="newMeter">
        <!-- 顶部操作栏 -->
        <div class="top_operation" v-if="isTopShow">
            <ul @click="hideReset" style="margin:0;">
                <li @click.stop="saveMeter">
                    <img src="~@/assets/save.png" alt="保存">
                    <span>保存</span>
                </li>
                <li @click.stop="changeEdition">
                    <img src="~@/assets/history.png" alt="历史版本">
                    <span>历史版本</span>
                    <a-icon type="caret-down" v-if="!historyShow" style="margin-left:5px;"/>
                    <a-icon type="caret-up" v-if="historyShow" style="margin-left:5px;"/>
                </li>
                <div class="historyList" v-if="historyShow">
                    <div class="historyEdition" 
                        :key="index" 
                        v-for="(item, index) in historyList"
                        @click.stop="doChange(index)"
                    >
                        <p>{{item.updateTime}} 由 {{item.updateBy}} 编辑了</p>
                        <b>{{item.name}}</b> 历史版本 <b>{{item.chartVersion}}</b>
                    </div>
                </div>
                <li @click.stop="showFilterBar()">
                    <img src="~@/assets/filter.png" alt="">
                    <span>过滤组件</span>
                    <a-icon type="caret-down" v-if="!filterBarShow" style="margin-left:5px;"/>
                    <a-icon type="caret-up" v-if="filterBarShow" style="margin-left:5px;"/>
                </li>
                <li class="resetEdition" v-if="isResetShow" @click.stop="resetEdition">还原至此版本</li>
                <li class="cancelReset" v-if="isResetShow" @click.stop="cancelReset">撤销</li>
                <li @click.stop="goPreviewMode()">
                    <img src="~@/assets/preview.png" alt="预览">
                    <span v-if="isSideBarShow">预览仪表板</span>
                    <span v-else>退出预览</span>
                </li>
            </ul>
        </div>
        <!-- 过滤组件模块 -->
        <div class="filter_bar" :style="{width: filterWidth, marginLeft: filterMargin}" v-if="filterBarShow">
            <div class="filter_time">
                <span>时间：</span>
                <a-range-picker
                    :show-time="showTime"
                    v-model="curDateTime"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="timeChange"
                    @ok="timeOk"
                />
            </div>

            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    v-model="cityId"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    @change="warehouseChange" 
                    v-model="organizeId"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>

        </div>
        <div class="main" :style="{height: mainHeight}">
            <!-- 侧边组件栏 -->
            <div class="side_bar" v-if="isSideBarShow">
                <ul>
                    <li 
                        @mouseenter="sidemouseenter()" 
                        @mouseleave="sidemouseleave()" 
                        @click="doAdd()"
                        >
                        <img v-if="isSideMouseOn" src="~@/assets/add.png" alt="">
                        <img v-else src="~@/assets/add_active.png" alt="">
                        <p>卡片</p>
                    </li>
                </ul>
            </div>
            
            <div 
                class="add_assembly" 
                v-if="addAssemblyShow"
                @mouseenter="mouseenter()" 
                @mouseleave="mouseleave()" 
                @click="doAdd()" 
                :class="{ active: borderActive }"
                >
                <img v-if="isMouseOn" src="~@/assets/add.png" alt="">
                <img v-else src="~@/assets/add_active.png" alt="">
                <p>添加卡片</p>
            </div>
            <!-- 添加组件对话框 -->
            <a-modal 
                v-model="visible" 
                width="1000px" 
                title="添加卡片" 
                @ok="handleOk" 
                :ok-button-props="{ props: { disabled: btnDisabled } }"
                >
                <div class="choice_data_div" style="height:500px;display:flex;">
                    <div style="width:260px;border-right:1px solid #e8eaed;overflow:auto;">
                        <p>数据列表</p>
                        <a-input-search placeholder="搜索业务包和表" style="width: 200px" v-model="searchValue" @search="meterSearch" @change="meterChange" size="small" allowClear/>
                        <a-directory-tree
                            @select="onSelect" 
                            @expand="onExpand"
                            :treeData="treeData"
                            :replaceFields="replaceFields"
                            style="margin-top:10px;"
                            :selectedKeys="selectedKeys"
                            :expandedKeys="expandedKeys"
                        >
                        </a-directory-tree>
                    </div>
                    <div style="flex:1;position:relative;">
                        <div 
                            style="width:160px;height:160px;text-align:center;padding-top:30px;position:absolute;top:50%;left:50%;margin-top:-80px;margin-left:-80px;" 
                            v-if="isDataTableShow"
                            >
                            <img src="~@/assets/choice_file.png" alt="">
                            <p>{{tipText}}</p>
                        </div>
                        <div 
                            style="width:700px;padding:20px;box-sizing:border-box;height:100%;overflow:auto;overflow-x:scroll;" 
                            v-else
                            >
                            <a-table 
                                :loading="tableLoading"
                                :columns="columns" 
                                :data-source="data" 
                                :pagination="false"
                                rowKey="id"
                            >
                            </a-table>
                        </div>
                    </div>
                </div>
            </a-modal>
            <!-- 拖拽缩放和图表插件运用 -->
            <div class="chart_list" v-show="isChartDivShow" @click="doDeselect()">
                <!-- 此处添加@click.stop=""阻止事件冒泡 -->
                <div class="chart_list_li" :key="item.title" v-for="(item, index) in chartList" @click.stop="">
                    <VueDragResize  
                        :isActive="item.isActive" 
                        :isDraggable="isDraggable"
                        :isResizable="isResizable"
                        :w="item.vw" 
                        :h="item.vh" 
                        :x="item.left"
                        :y="item.top"
                        :z="item.zIndex"
                        :index="index"
                        :grid=[10,10]
                        v-on:resizing="resize" 
                        v-on:dragging="resize"
                        @clicked="activateEv(index)"
                        style="background:#ffffff;"
                    >
                        <!-- 文本卡片 -->
                        <div 
                            v-if="item.type === 'text'" 
                            :id="`main${index}`" 
                            class="text_container"
                        >
                            <h5>{{item.title}}</h5>
                            <!-- <p>{{item.textData}}</p> -->
                            <p :style="{fontSize: item.textSize + 'px', color: item.textColor}">{{item.prefix}}{{item.textData}}{{item.suffix}}</p>
                        </div>
                        <!-- 图表卡片 -->
                        <div 
                            v-else 
                            :id="`main${index}`" 
                            class="main_container" 
                            :style="{width: item.vw + 'px',height: item.vh + 'px'}">
                        </div>
                        <!-- 卡片编辑删除按钮 -->
                        <div class="main_more" v-if="item.isMoreShow">
                            <div class="main_more_edit" @click.stop="doEditChart(item.title)" v-if="!previewMode">
                                <img src="~@/assets/edit.png" alt="">
                            </div>
                            <div class="main_more_delete" @click.stop="doDeleteChart(item.title)" v-if="!previewMode">
                                <img src="~@/assets/delete.png" alt="">
                            </div>
                        </div>
                    </VueDragResize>
                </div>
            </div>
        </div>
        <!-- 卡片编辑面板 -->
        <div class="meter_edit" v-if="meterEditShow">
            <div class="meter_btn_top">
                <p v-if="this.addMode" class="confirm_btn" @click="confirmMeterEdit()">确定</p>
                <p v-else class="confirm_btn" @click="saveMeterEdit()">保存</p>
                <p class="close_btn" @click="closeMeterEdit()">关闭</p>
            </div>
            <div class="meter_edit_main">
                <!-- 左侧选择图表类型 -->
                <div class="edit_main_left">
                    <p>数据源名称：<b>{{dsName}}</b></p>
                    <p><span class="required_tip">*</span>设置标题：</p>
                    <input type="text" style="width:210px;border: 1px solid #9ea6b2;" v-model="titleText" @blur="inputBlur">
                    
                    <p style="margin-top:30px;">选择图表类型：</p>
                    <ul class="chart_type_list">
                        <li :key="index"
                            v-for="(item, index) in chartType"
                            @click="selected(item.name, item.type, item.pic, index)"
                        >
                            <img :src="item.pic" alt="">
                        </li>
                    </ul>
                    <span class="chartTypeDesc">{{chartTypeName}}</span>

                    <!-- 文本样式 -->
                    <div v-if="this.curChartType === 'text'">
                        <p style="margin-top:30px;">文本样式：</p>
                        <div class="style_set_div">
                            <span>大小</span>
                            <a-select v-model="textSize" style="width: 120px" size="small" @change="fontSizeChange">
                                <a-select-option value="14">
                                    14
                                </a-select-option>
                                <a-select-option value="16">
                                    16
                                </a-select-option>
                                <a-select-option value="18">
                                    18
                                </a-select-option>
                                <a-select-option value="20">
                                    20
                                </a-select-option>
                                <a-select-option value="24">
                                    24
                                </a-select-option>
                                <a-select-option value="28">
                                    28
                                </a-select-option>
                                <a-select-option value="36">
                                    36
                                </a-select-option>
                                <a-select-option value="48">
                                    48
                                </a-select-option>
                                <a-select-option value="72">
                                    72
                                </a-select-option>
                            </a-select>
                            px
                        </div>
                        <div class="style_set_div">
                            <span>颜色</span>
                            <div class="style_set_color">
                                <colorPicker v-model="textColor" @change="textChangeColor" />
                            </div>
                        </div>
                        <div class="style_set_div">
                            <span>前缀</span>
                            <a-input placeholder="请输入前缀" style="width: 120px" size="small" v-model="prefix" />
                        </div>
                        <div class="style_set_div">
                            <span>后缀</span>
                            <a-input placeholder="请输入后缀" style="width: 120px" size="small" v-model="suffix" />
                        </div>
                    </div>
                </div>
                <!-- 中间数据过滤器 -->
                <div class="edit_main_center">
                    <p>数据过滤器</p>
                    <button @click="addCondition">添加条件</button>
                    <a-modal
                        title="过滤条件"
                        width="800px"
                        :visible="conditionVisible"
                        :confirm-loading="conditionConfirmLoading"
                        @ok="conditionHandleOk"
                        @cancel="conditionHandleCancel"
                    >
                        <div style="display:flex;">
                            <div style="flex:2;">
                                <p style="text-align:center;">选择字段</p>
                                <a-select v-model="fieldCode" style="width:210px;margin-left:20px;" @change="fieldTypeChange">
                                    <a-select-option :key="index" v-for="(item, index) in fieldList" :value="item.code">
                                        {{item.name}} ({{item.viewType}})
                                    </a-select-option>
                                </a-select>
                            </div>
                            <div style="flex:1;">
                                <p style="text-align:center;">条件</p>
                                <a-select 
                                    v-model="symbol"
                                    style="width:100px;margin-left:8px;" 
                                    @change="fieldConditionChange"
                                    v-if="this.fieldType === 'string'"
                                >
                                    <a-select-option value="eq">
                                        等于
                                    </a-select-option>
                                    <a-select-option value="in">
                                        包含
                                    </a-select-option>
                                    <a-select-option value="notEq">
                                        不等于
                                    </a-select-option>
                                    <a-select-option value="notIn">
                                        不包含
                                    </a-select-option>
                                    <a-select-option value="vague">
                                        模糊匹配
                                    </a-select-option>
                                </a-select>
                                <a-select 
                                    v-model="symbol"
                                    style="width:100px;margin-left:8px;" 
                                    @change="fieldConditionChange"
                                    v-else-if="this.fieldType === 'date'"
                                >
                                    <a-select-option value="bewtee">
                                        ~ 至 ~
                                    </a-select-option>
                                    <a-select-option value="dynamic">
                                        动态时间
                                    </a-select-option>
                                </a-select>
                                <a-select 
                                    v-model="symbol"
                                    style="width:100px;margin-left:8px;" 
                                    @change="fieldConditionChange"
                                    v-else
                                >
                                    <a-select-option value="bewtee">
                                        ~ 至 ~
                                    </a-select-option>
                                </a-select>
                            </div>
                            <div style="flex:4;">
                                <p style="text-align:center;">值</p>
                                <a-input v-if="this.fieldType === 'string'" v-model="valBegin" style="width:300px;margin-left:55px;"/>
                                <div v-else-if="this.fieldType === 'numeric'">
                                    <a-input-number id="startNumber" v-model="valBegin" style="width:190px;margin-left:8px;" :min="0" @change="startNumberChange" />
                                    &nbsp;-&nbsp;
                                    <a-input-number id="endNumber" v-model="valEnd" style="width:190px;" :min="0" @change="endNumberChange" />
                                </div>
                                <div v-else>
                                    <div v-if="this.symbol === 'bewtee'">
                                        <a-date-picker
                                            v-model="valBegin"
                                            :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" 
                                            placeholder="Start Date" 
                                            style="width:195px;margin-left:8px;" 
                                            @change="startDateChange" @ok="startDateOk"
                                        />
                                        -
                                        <a-date-picker
                                            v-model="valEnd"
                                            :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" 
                                            placeholder="End Date" 
                                            style="width:195px;" 
                                            @change="endDateChange" @ok="endDateOk"
                                        />
                                    </div>
                                    <div v-else>
                                        <span style="margin-left:61px;">近</span>
                                        <a-input-number id="timeNumber" v-model="valBegin" style="width:120px;margin-left:8px;" :min="0" @change="timeNumberChange" />
                                        <a-select 
                                            v-model="valEnd"
                                            style="width:120px;margin-left:8px;" 
                                            @change="timeTypeChange"
                                        >
                                            <a-select-option value="minute">
                                                分钟
                                            </a-select-option>
                                            <a-select-option value="hour">
                                                小时
                                            </a-select-option>
                                            <a-select-option value="day">
                                                天
                                            </a-select-option>
                                            <a-select-option value="month">
                                                月
                                            </a-select-option>
                                            <a-select-option value="year">
                                                年
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </a-modal>
                    <div class="condition_list">
                        <div class="condition_list_li" v-for="(item, index) in chartFilterList" :key="index">
                            <img class="filter_img" src="~@/assets/filter_grey.png" alt="">
                            <span>{{item.fieldName}}</span>
                            <a-dropdown>
                                <img class="more_img" src="~@/assets/more_blue.png" alt="">
                                <a-menu slot="overlay">
                                    <a-menu-item>
                                        <span @click="editCondition(index)">编辑</span>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <span @click="deleteCondition(index)">删除</span>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </div>
                    </div>
                </div>
                <!-- 右侧选择字段和图表预览 -->
                <div class="edit_main_right">
                    <div class="main_right_top">
                        <div class="select_data">
                            <span>横轴</span>
                            <a-select style="width: 600px" v-model="xAxisValue" @change="xHandleChange" :disabled="xDisabled">
                                <a-select-option :key="index" v-for="(item, index) in xAxisList" :value="item.key">
                                    {{item.title}}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div class="select_data">
                            <span>竖轴</span>
                            <a-select style="width: 600px" :mode="selectMode" :default-value="yAxisValue" @change="yHandleChange" :disabled="yDisabled">
                                <a-select-option :key="index" v-for="(item, index) in yAxisList" :value="item.key">
                                    {{item.title}}
                                </a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div class="main_right_bottom">
                        <div class="chart_type_tip" v-show="this.curChartType === ''">
                            <img src="~@/assets/choice_file.png" alt="">
                            <p>请在左侧选择图表类型</p>
                        </div>
                        <!-- 图表卡片预览模块 -->
                        <div v-show="this.curChartType !== '' && this.curChartType !== 'text'">
                            <div style="width:1300px;height:600px;margin-top:85px;" id="mainshow" class="main_container"></div>
                        </div>
                        <!-- 文本卡片预览模块 -->
                        <div v-show="this.curChartType === 'text'" class="text_data_div">
                            <h5>{{titleText}}</h5>
                            <p :style="{fontSize: textSize + 'px', color: textColor}">{{prefix}}{{textData}}{{suffix}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>   
    const chartType = [
        {
            name: '文本',
            type: 'text',
            describe: '文本',
            pic: require('../../assets/text.png'),
        },
        {
            name: '柱状图',
            type: 'bar',
            describe: '柱状图',
            pic: require('../../assets/bar.png'),
        },
        {
            name: '折线图',
            type: 'line',
            describe: '折线图',
            pic: require('../../assets/line.png'),
        },
        {
            name: '饼状图',
            type: 'pie',
            describe: '饼状图',
            pic: require('../../assets/pie.png'),
        },
    ];

    import moment from 'moment'
    import * as echarts from "echarts/core"; // 引入echarts
    import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from "echarts/components";
    import { BarChart, PieChart, LineChart } from "echarts/charts"; // 引入需要用到的图表类型
    import { CanvasRenderer } from "echarts/renderers";
    import { getDataSource, getDSDetails, getDSDetailsAll, getMeterList, saveMeter, getFieldList, getMeterHistoryList, getMeterDetails, setHomepage, getHeadquarters, getRegion, getCity, getWarehouse, } from '@/api/api'

    echarts.use(
        [
            TitleComponent,
            TooltipComponent, 
            GridComponent,
            LegendComponent, 
            BarChart, 
            PieChart, 
            LineChart, 
            CanvasRenderer
        ]
    );
    import VueDragResize from "vue-drag-resize";
    export default {
        name: "NewMeter",
        components: {
            VueDragResize,
        },
        props: {
            homepageId: {
                type: String,
                default: ''
            },
            homepageCode: {
                type: String,
                default: ''
            },
            homepageGrade: {
                type: Number,
                default: 0
            },
        },
        inject: ['reload'],
        data () {
            return {
                isRegionShow: false,
                isCityShow: false,
                isWareShow: false,
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                regionList: [],
                cityList: [],
                warehouseList: [],

                grade: '',
                postList: [], // 保存时提交的数据
                id: '',
                code: '', 
                catalogId: '',
                flag: 0,
                dsCode: '',
                xCode: '',
                xType: '',
                yCode: '',
                yType: '',
                createTime_begin: '',
                createTime_end: '',

                historyList: [], // 仪表板历史版本集合
                historyShow: false,
                isResetShow: false,

                isMouseOn: true, // 鼠标滑过中间添加组件框
                borderActive: false, // 鼠标滑过中间添加组件框添加边框阴影
                isSideMouseOn: true, // 鼠标滑过侧边栏添加组件框 
                visible: false, // 添加组件对话框是否显示

                filterWidth: 'calc(100% - 60px)',
                filterMargin: '60px',

                curDateTime: [
                    moment("00:00:00", "HH:mm:ss"), moment("23:59:59", "HH:mm:ss")
                ],
                showTime: {
                    format: "HH:mm:ss",
                },
                filterBarShow: true, // 过滤面板是否显示
                isDataTableShow: true, // 添加组件对话框是否选择数据
                btnDisabled: true, // 添加组件对话框确认按钮是否失效
                searchValue: '',
                treeData: [],
                replaceFields: {
                    key: 'dsCode',
                    title: 'categoryName',
                    children: 'dsConfList',
                },
                selectedKeys: [],
                expandedKeys: [],

                data: [],
                columns: [],
                tableLoading: false,
                viewType: 'string',
                viewTypeList: [],
                tipText: '请从左侧选择表',
                meterEditShow: false, // 卡片编辑面板是否显示
                chartType, // 图形类型列表
                chartTypeName: '', // 当前选中图表类型名称
                curChartType: '', // 当前选中图表类型
                active:'', // 当前选中图表类型高亮
                addAssemblyShow: true, // 添加组件按钮是否显示
                isChartDivShow: false, // 卡片拖拽缩放组件是否显示
                initialText: '输入标题名称', // 初始标题
                dsName: '', // 数据源名称
                titleText: '', // 标题
                hasSameTitle: false, // 是否存在相同标题
                textSize: 14,
                textColor: '#f2a654',
                prefix: '',
                suffix: '',
                addConditionFlag: true,
                conditionIndex: 0,
                conditionVisible: false,
                conditionConfirmLoading: false,
                fieldList: [],
                fieldCode: '',
                fieldName: '',
                fieldType: '',
                symbol: '',
                valBegin: '',
                valEnd: '',
                chartFilterList: [],
                textData: '0', // 文本框数据
                chartList: [], // 卡片数据集合
                curChartIndex: 0, // 当前操作的卡片下标
                xName: '',
                yName: '',
                xCode: '',
                yCode: '',
                xType: '',
                yType: '',
                yNameList: [],
                xAxisList: [], // 横轴数据列表
                xAxisValue: '', // 横轴选中数据
                yAxisList: [], // 竖轴数据列表
                xDisabled: false,
                yDisabled: false,
                yAxisValue: [], // 竖轴选中数据集合
                selectMode: 'multiple',
                xAxisData: [], // 图表横轴数据
                yAxisData: [], // 图表竖轴数据
                yPieAxisData: [], // 饼图竖轴数据
                isDraggable: true, // 是否能拖动
                isResizable: true, // 是否能缩放
                mainHeight: 'calc(100% - 92px)',
                isSideBarShow: true, // 侧边栏是否显示
                addMode: true, // true为新建卡片模式，false为编辑卡片模式
                previewMode: false, // 当前是否为预览模式
                targList: [], // 指标集合
                allTargList: [],
                isTopShow: true, // 顶部操作栏
                homeInfo: {},
                clientWidth: 0,
                clientHeight: 0,
                zIndex: 1,
                screenWidth: document.body.clientWidth,
                timer: false,
            }
        },
        
        created() {
            // 获取今天的时间作为默认时间以后台需要的格式请求
            var d = new Date()
            var curDateTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
            this.curDateTime = [moment(curDateTime + ' ' + '00:00:00'), moment(curDateTime + ' ' + '23:59:59')]
            this.createTime_begin = this.curDateTime[0]._i
            this.createTime_end = this.curDateTime[1]._i
            
            if(this.homepageId !== ''){
                this.grade = parseInt(this.homepageGrade)
                this.code = this.homepageCode
                this.catalogId = this.homepageId

                this.previewMode = true
                this.isSideBarShow = false
                this.isTopShow = false
                this.isDraggable = false
                this.isResizable = false
                this.addAssemblyShow = false
                this.filterBarShow = true
                this.filterWidth = '100%'
                this.filterMargin = '0'

                if(localStorage.getItem('homeInfo')){
                    this.homeInfo = JSON.parse(localStorage.getItem('homeInfo'))
                    if(this.homeInfo.regionId !== ''){
                        this.$route.query.regionId = this.homeInfo.regionId
                    }
                    if(this.homeInfo.cityId !== ''){
                        this.$route.query.cityId = this.homeInfo.cityId
                    }
                    if(this.homeInfo.organizeId !== ''){
                        this.$route.query.organizeId = this.homeInfo.organizeId
                    }
                }
            }else{
                // 获取上一个页面传过来的query
                if(this.$route.query.code && this.$route.query.catalogId){
                    document.title = this.$route.query.title
                    this.grade = parseInt(this.$route.query.grade)
                    this.code = this.$route.query.code
                    this.catalogId = this.$route.query.catalogId

                    // 判断当前是否是预览模式
                    if(this.$route.query.previewMode === 'true'){
                        this.previewMode = true
                        this.isSideBarShow = false
                        this.isTopShow = false
                        this.isDraggable = false
                        this.isResizable = false
                        this.addAssemblyShow = false
                        this.filterBarShow = true
                        this.filterWidth = '100%'
                        this.filterMargin = '0'
                    }else{
                        this.previewMode = false
                        this.isSideBarShow = true
                        this.isTopShow = true
                        this.isDraggable = true
                        this.isResizable = true
                        this.addAssemblyShow = true
                        this.filterBarShow = true
                    }
                }
            }
            // 判断当前等级
            if(this.grade === 0){
                this.isRegionShow = false
                this.isCityShow = false
                this.isWareShow = false
            }else if(this.grade === 1){
                this.isRegionShow = true
                this.isCityShow = false
                this.isWareShow = false
            }else if(this.grade === 2){
                this.isRegionShow = true
                this.isCityShow = true
                this.isWareShow = false
            }else{
                this.isRegionShow = true
                this.isCityShow = true
                this.isWareShow = true
            }
            this.getHeadquartersList()

            this.clientWidth = document.body.clientWidth
            this.clientHeight = document.body.clientHeight
        },
        mounted() {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        },
        watch:{
            screenWidth(val){
                // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
                if(!this.timer){
                    // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function(){
                        // 打印screenWidth变化的值
                        that.reload()
                        that.timer = false
                    },700)
                }
            }
        },
        methods: {
            moment,

            // 获取仪表板列表
            getMeterList() {
                let params = {
                    id: this.catalogId,
                    flag: this.flag,
                }
                getMeterList(params).then((res)=>{
                    // this.chartList = []
                    this.postList = []
                    if(res.success && res.result && res.result.length > 0){
                        this.flag = 0
                        this.postList = res.result
                        this.allTargList = res.result
                        this.isChartDivShow = true
                        this.addAssemblyShow = false
                        this.chartList = []
                        for(var i=0;i<this.postList.length;i++){
                            let xCode = this.postList[i].chartInfoList[0].xzCode

                            let chartWidth = parseInt((this.postList[i].chartWidth * this.clientWidth) / 100000000)
                            let chartLength = parseInt((this.postList[i].chartLength * this.clientHeight) / 100000000)
                            let chartTop = parseInt((this.postList[i].chartTop * this.clientHeight) / 100000000)
                            let chartLeft = parseInt((this.postList[i].chartLeft * this.clientWidth) / 100000000)

                            let chartType = this.postList[i].chartType
                            let chartName = this.postList[i].chartName
                            let xzName = this.postList[i].chartInfoList[0].xzName
                            let yzName = this.postList[i].chartInfoList[0].yzName
                            let yCode = this.postList[i].chartInfoList[0].yzCode
                            let chartInfo = this.postList[i].chartInfoList
                            let targInfo = this.postList[i].targList
                            this.targList = this.postList[i].targList
                            let textSize = this.postList[i].textSize
                            let textColor = this.postList[i].textColor
                            let prefix = this.postList[i].prefix
                            let suffix = this.postList[i].suffix
                            let chartFilterList = this.postList[i].chartFilterList
                            
                            if(chartType === 'text'){
                                let params = {
                                    dsCode: this.postList[i].dsCode,
                                    grade: this.grade,
                                    code: this.code,
                                    createTime_begin: this.createTime_begin,
                                    createTime_end: this.createTime_end,
                                    chartType: chartType,
                                    xzCode: xCode,
                                    chartFilterList: chartFilterList,
                                }

                                getMeterDetails(params).then((res)=>{
                                    if(res.success && res.result){
                                        if(res.result.dsDetailList){
                                            this.textData = res.result.dsDetailList
                                        }else{
                                            this.textData = '~'
                                        }
                                        var chartData = {
                                                vw: chartWidth, // 四个值记录图表当前大小和位置
                                                vh: chartLength,
                                                top: chartTop,
                                                left: chartLeft,
                                                type: chartType,
                                                isActive: false,
                                                isMoreShow: false,
                                                zIndex: this.zIndex,
                                                xAxisValue: this.xAxisValue,
                                                yAxisValue: this.yAxisValue,
                                                title: chartName,
                                                textData: this.textData,
                                                textSize: textSize,
                                                textColor: textColor,
                                                prefix: prefix,
                                                suffix: suffix,
                                            }
                                        this.chartList.push(chartData)
                                        
                                    }else{
                                        this.$message.warning(res.message)
                                    }
                                })
                            }else if(chartType === 'pie'){
                                let params = {
                                    dsCode: this.postList[i].dsCode,
                                    grade: this.grade,
                                    code: this.code,
                                    createTime_begin: this.createTime_begin,
                                    createTime_end: this.createTime_end,
                                    chartType: chartType,
                                    xzCode: xCode,
                                    yzCode: this.postList[i].chartInfoList[0].yzCode,
                                    chartFilterList: chartFilterList,
                                }

                                getMeterDetails(params).then((res)=>{
                                    if(res.success && res.result && res.result.dsDetailList){
                                        this.yPieAxisData = res.result.dsDetailList
                                        
                                        var chartData = {
                                            vw: chartWidth, // 四个值记录图表当前大小和位置
                                            vh: chartLength,
                                            top: chartTop,
                                            left: chartLeft,
                                            type: chartType,
                                            isActive: false,
                                            isMoreShow: false,
                                            zIndex: this.zIndex,
                                            xAxisValue: this.xAxisValue,
                                            yAxisValue: this.yAxisValue,
                                            title: chartName,
                                            chartData: {
                                                title: [
                                                    {
                                                        x: 'center',
                                                        text: chartName,
                                                        textStyle: {
                                                            textAlign: 'center',
                                                            color: '#c7d0d9',
                                                            fonrSize: 14,
                                                            fontWeight: 200,
                                                        }
                                                    },
                                                ],
                                                tooltip: {
                                                    trigger: 'item'
                                                },
                                                backgroundColor: '#141619',
                                                // legend: {
                                                //     orient: 'vertical',
                                                //     left: 'center',
                                                // },
                                                series: [
                                                    {
                                                        name: xzName,
                                                        type: chartType,
                                                        radius: '50%',
                                                        data: this.yPieAxisData,
                                                        emphasis: {
                                                            itemStyle: {
                                                                shadowBlur: 10,
                                                                shadowOffsetX: 0,
                                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                            }
                                                        }
                                                    }
                                                ]
                                            },
                                        }
                                        this.chartList.push(chartData)

                                        this.initCharts()
                                    }else{
                                        this.$message.warning(res.message)
                                    }
                                })
                            }else{
                                var arr = []
                                for(var item of chartInfo){
                                    arr.push(item.yzCode)
                                }

                                let params = {
                                    dsCode: this.postList[i].dsCode,
                                    grade: this.grade,
                                    code: this.code,
                                    createTime_begin: this.createTime_begin,
                                    createTime_end: this.createTime_end,
                                    chartType: chartType,
                                    xzCode: xCode,
                                    yzCode: arr.join(','),
                                    chartFilterList: chartFilterList,
                                }

                                getMeterDetails(params).then((res)=>{
                                    if(res.success && res.result && res.result.dsDetailList){
                                        this.xAxisData = []
                                        this.yAxisData = []
                                        
                                        // X轴
                                        for(var item of res.result.dsDetailList){
                                            this.xAxisData.push(item[xCode])
                                        }

                                        // Y轴
                                        for(var item of chartInfo){
                                            var arr = []
                                            for(var dItem of res.result.dsDetailList){
                                                arr.push(dItem[item.yzCode])
                                            }
                                            this.yAxisData.push({data: arr, type: chartType, code: item.yzCode, name: item.yzName, })
                                        }

                                        var legendData = []
                                        for(var item of this.yAxisData){
                                            legendData.push(item.name)
                                        }
                                        
                                        // 指标
                                        if(targInfo && targInfo.length > 0){
                                            let yArr = this.yAxisData
                                            let copyArr = []
                                            for(var item of yArr){
                                                for(var tItem of targInfo){
                                                    if(item.code === tItem.dsFieldCode){
                                                        var aLength = item.data.length
                                                        var arr = []
                                                        for(var i=0;i<aLength;i++){
                                                            arr.push(tItem.targIndex)
                                                        }
                                                        copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                                    }
                                                }
                                            }
                                            this.yAxisData = yArr.concat(copyArr)
                                        }
                                        
                                        var chartData = {
                                            vw: chartWidth, // 四个值记录图表当前大小和位置
                                            vh: chartLength,
                                            top: chartTop,
                                            left: chartLeft,
                                            type: chartType,
                                            isActive: false,
                                            isMoreShow: false,
                                            zIndex: this.zIndex,
                                            xAxisValue: this.xAxisValue,
                                            yAxisValue: this.yAxisValue,
                                            title: chartName,
                                            chartData: {
                                                title: [
                                                    {
                                                        x: 'left',
                                                        text: chartName,
                                                        textStyle: {
                                                            textAlign: 'center',
                                                            color: '#c7d0d9',
                                                            fonrSize: 14,
                                                            fontWeight: 100,
                                                        }
                                                    },
                                                ],
                                                tooltip: {
                                                    trigger: 'axis'
                                                },
                                                legend: {
                                                    orient: 'horizontal',
                                                    top: 2,
                                                    right: 80,
                                                    textStyle: {
                                                        color: '#c7d0d9'
                                                    },
                                                    data: legendData
                                                },
                                                backgroundColor: '#141619',
                                                xAxis: {
                                                    name: xzName,
                                                    type: 'category',
                                                    data: this.xAxisData,
                                                },
                                                yAxis: {
                                                    name: yzName,
                                                    type: 'value'
                                                },
                                                series: this.yAxisData
                                            },
                                        }
                                        this.chartList.push(chartData)

                                        this.initCharts()
                                    }else{
                                        this.$message.warning(res.message)
                                    }
                                })
                            }
                        }
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 点击空白隐藏历史版本框
            hideReset() {
                this.historyShow = false
            },
            // 切换版本
            changeEdition() {
                this.historyShow = !this.historyShow

                let params = {
                    catalogId: this.catalogId	
                }
                getMeterHistoryList(params).then((res)=>{
                    if(res.success && res.result){
                        this.historyList = res.result
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 选择版本
            doChange(index) {
                this.postList = []
                this.chartList = []
                this.catalogId = this.historyList[index].id
                this.flag = 1
                this.getMeterList()
                
                this.isResetShow = true
            },
            // 还原版本
            resetEdition() {
                this.saveMeter()
            },
            // 撤销还原
            cancelReset() {
                // 撤销获取最后一个版本数据
                this.catalogId = this.historyList[0].id
                this.getMeterList()
                this.historyShow = false
                this.isResetShow = false
            },
            // 保存
            saveMeter() {
                let params = this.postList
                saveMeter(params).then((res)=>{
                    if(res.success){
                        this.$message.success('保存成功！')
                        this.postList = []
                        this.chartList = []
                        this.getMeterList()
                        this.isResetShow = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })

                this.historyShow = false
            },

            // 选择时间
            timeChange(date, dateString) {
                this.createTime_begin = dateString[0]
                this.createTime_end = dateString[1]
            },
            timeOk(value) {
                this.getMeterList()
            },
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id

                        if(this.grade === 0){
                            this.getMeterList()
                        }
                        if(this.grade === 1 || this.grade === 2 || this.grade === 3){
                            this.getRegionList()
                        }
                        
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length > 0){
                            if(this.$route.query.regionId){
                                if(this.grade === 1){
                                    this.regionId = this.$route.query.regionId
                                    for(var item of this.regionList){
                                        if(this.regionId === item.id){
                                            this.code = item.code
                                        }
                                    }
                                    this.getMeterList()
                                }
                            }else{
                                
                                if(this.grade === 1){
                                    this.regionId = res.result.organizeOrgList[0].id
                                    this.code = res.result.organizeOrgList[0].code
                                    this.getMeterList()
                                }
                            }
                            
                            if(this.grade === 2 || this.grade === 3){
                                if(this.$route.query.regionId){
                                    this.regionId = this.$route.query.regionId
                                    for(var item of this.regionList){
                                        if(this.regionId === item.id){
                                            this.code = item.code
                                        }
                                    }
                                }else{
                                    this.regionId = res.result.organizeOrgList[0].id
                                    this.code = res.result.organizeOrgList[0].code
                                }
                                this.getCityList()
                            }
                            
                        }
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.$route.query.cityId = undefined
                this.$route.query.organizeId = undefined

                this.regionId = value
                for(var item of this.regionList) {
                    if(item.id === this.regionId) {
                        this.code = item.code
                    }
                }
                
                this.cityId = ''
                this.cityList = []
                this.organizeId = ''
                this.warehouseList = []

                this.getCityList()

                if(this.grade === 1){
                    this.getMeterList()
                }

            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length > 0){
                            if(this.$route.query.cityId){
                                if(this.grade === 2){
                                    this.cityId = this.$route.query.cityId
                                    for(var item of this.cityList){
                                        if(this.cityId === item.id){
                                            this.code = item.code
                                        }
                                    }
                                    this.getMeterList()
                                }
                            }else{
                                if(this.grade === 2){
                                    this.cityId = res.result.organizeOrgList[0].id
                                    this.code = res.result.organizeOrgList[0].code
                                    this.getMeterList()
                                }
                            }
                            
                            if(this.grade === 3){
                                if(this.$route.query.cityId){
                                    this.cityId = this.$route.query.cityId
                                        for(var item of this.cityList){
                                            if(this.cityId === item.id){
                                                this.code = item.code
                                            }
                                        }
                                }else{
                                    this.cityId = res.result.organizeOrgList[0].id
                                    this.code = res.result.organizeOrgList[0].code
                                }
                                this.getWarehouseList()
                            }
                            
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.$route.query.organizeId = undefined

                this.cityId = value
                for(var item of this.cityList) {
                    if(item.id === this.cityId) {
                        this.code = item.code
                    }
                }
                
                this.organizeId = ''
                this.warehouseList = []

                this.getWarehouseList()

                if(this.grade === 2){
                    this.getMeterList()
                }
                
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length > 0){
                            if(this.$route.query.organizeId){
                                if(this.grade === 3){
                                    this.organizeId = this.$route.query.organizeId
                                    for(var item of this.warehouseList){
                                        if(this.organizeId === item.id){
                                            this.code = item.code
                                        }
                                    }
                                    this.getMeterList()
                            }
                            }else{
                                if(this.grade === 3){
                                    this.organizeId = res.result.organizeOrgList[0].id
                                    this.code = res.result.organizeOrgList[0].code
                                    this.getMeterList()
                                }
                            }
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.organizeId = value
                for(var item of this.warehouseList) {
                    if(item.id === this.organizeId) {
                        this.code = item.code
                    }
                }
                if(this.grade === 3){
                    this.getMeterList()
                }
            },

            // 鼠标移入
            mouseenter() {
                this.isMouseOn = false
                this.borderActive = true
            },
            // 鼠标移出
            mouseleave() {
                this.isMouseOn = true
                this.borderActive = false
            },
            // 侧边栏鼠标移入
            sidemouseenter() {
                this.isSideMouseOn = false
            },
            // 侧边栏鼠标移出
            sidemouseleave() {
                this.isSideMouseOn = true
            },
            // 获取数据源列表
            getDataSource() {
                let params = {
                    name: '',
                }
                getDataSource(params).then((res)=>{
                    if(res.success){
                        this.treeData = res.result
                        // 给子级添加isLeaf属性，让子级显示为文件
                        for(var item of this.treeData){
                            for(var childItem of item.dsConfList){
                                childItem.isLeaf = true
                            }
                        }
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 添加组件
            doAdd() {
                this.historyShow = false

                this.visible = true
                this.isDataTableShow = true
                
                this.getDataSource()

                this.xCode = ''
                this.yCode = ''

                this.xAxisValue = ''
                this.yAxisValue = []

                this.selectedKeys = []
                this.expandedKeys = []
                this.searchValue = ''

                this.textSize = 14
                this.textColor = '#f2a654'
                this.prefix = ''
                this.suffix = ''

                this.chartFilterList = []
            },
            handleOk(e) {
                this.visible = false;
                this.meterEditShow = true
                // 打开仪表编辑面板时重置图表类型选择，否则会默认选中上次的选择的图表类型
                this.initialText = '输入标题名称'
                this.chartTypeName = ''
                this.curChartType = ''
                this.active = ''
                this.xAxisValue = '' // 清空横轴选中的参数
                this.yAxisValue = [] // 清空竖轴选中的参数
                this.xAxisData = []
                this.yAxisData = []
                this.yPieAxisData = []

                // 过滤字段类型，横轴只能选择string和date,竖轴只能选择numeric
                for(var item of this.columns){
                    for(var tItem of this.viewTypeList){
                        if(item.key === tItem.code){
                            item.viewType = tItem.viewType
                        }
                    }
                }
                this.xAxisList = this.columns.filter(v => v.viewType === 'string' | v.viewType === 'date')
                this.yAxisList = this.columns.filter(v => v.viewType === 'numeric')
                
                // 重置当前标题
                this.titleText = ''
            },
            // 搜索业务包和表
            meterSearch(value) {
                const rebuildData = (value, arr) => {
                    if (!arr) {
                        return []
                    }
                    let newarr = [];
                    arr.forEach(element => {
                        if (element.categoryName.indexOf(value) > -1) {
                            const ab = rebuildData(value, element.dsConfList);
                            const obj = {
                                ...element,
                                children: ab
                            }
                            newarr.push(obj);
                        } else {
                        if (element.dsConfList && element.dsConfList.length > 0) {
                            const ab = rebuildData(value, element.dsConfList);
                            const obj = {
                                ...element,
                                dsConfList: ab
                            };
                            if (ab && ab.length > 0) {
                                newarr.push(obj);
                            }
                        }
                        }
                    });
                    return newarr;
                };

                this.treeData = rebuildData(value, this.treeData)
            },
            meterChange() {
                if(this.searchValue === ''){

                    this.getDataSource()
                }
            },
            // 过滤组件按钮
            showFilterBar() {
                this.filterBarShow = !this.filterBarShow
                this.historyShow = false
                if(this.filterBarShow){
                    this.mainHeight = 'calc(100% - 92px)'
                }else{
                    this.mainHeight = 'calc(100% - 40px)'
                }
            },
            // 树形控件选择
            onSelect(keys, event) {
                if(event.selectedNodes[0]._props.isLeaf){
                    this.selectedKeys = keys
                    this.dsCode = keys[0]
                    this.dsName = event.selectedNodes[0]._props.title
                    
                    let params = {
                        dsCode: keys[0],
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: '',
                        createTime_end: '',
                        limitFlag: 1,
                    }
                    this.tableLoading = true
                    getDSDetailsAll(params).then((res)=>{
                        this.tableLoading = false
                        if(res.success && res.result){
                            this.isDataTableShow = false
                            if(res.result.dsDetailTitleMap){
                                let arr = []
                                for(let i in res.result.dsDetailTitleMap){
                                    arr.push({title: res.result.dsDetailTitleMap[i], key: i, dataIndex: i, align: 'center',})
                                }
                                this.columns = arr.filter(v => v.title !== '')
                            }
                            if(res.result.dsDetailList && res.result.dsDetailList.length > 0){
                                this.data = res.result.dsDetailList
                                this.btnDisabled = false
                            }else{
                                this.isDataTableShow = true
                                this.tipText = '当前表格暂无数据！'
                                this.btnDisabled = false
                            }
                        }else{
                            this.$message.warning(res.message)
                            this.isDataTableShow = true
                            this.tipText = '当前表格暂无数据！'
                        }
                    })

                    // 根据数据源获取所对应的字段清单
                    let param = {
                        dsCode: keys[0],
                    }
                    getFieldList(param).then((res)=>{
                        if(res.success && res.result){
                            this.viewTypeList = res.result
                            this.fieldList = res.result
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
        
            },
            onExpand(value) {
                this.expandedKeys = value
            },
            // 仪表板确定
            confirmMeterEdit() {
                // 判断当前是否选择了图表类型
                if(this.titleText === ''){
                    this.$message.warning('请给卡片设置一个标题！');
                }else if(this.curChartType === '' ){
                    this.$message.warning('请在左侧选择图表类型！');
                }else if(this.hasSameTitle){
                    this.$message.warning('当前标题已存在请修改！')
                }else{
                    this.meterEditShow = false
                    this.addAssemblyShow = false
                    this.isChartDivShow = true

                    // 计算当前图表集合里的高度，找出top加vh最大的值
                    var topList = []
                    for(var item of this.chartList){
                        topList.push(parseInt(item.top) + parseInt(item.vh))
                    }
                    var topMax = topList[0]
                    for(var i=1; i<topList.length; i++){
                        if(topMax < topList[i]){
                            topMax = topList[i]
                        }
                    }
                    // 把最大值赋值给新建的图表的top
                    var chartLeft = parseInt((10 / this.clientWidth) * 100000000)
                    var chartTop = parseInt(((10 + topMax) / this.clientHeight) * 100000000)
                    
                    // 判断当前添加是文本还是图表
                    if(this.curChartType === 'text'){
                        
                        this.chartList.push(
                            {
                                vw: 260,
                                vh: 120,
                                top: chartTop,
                                left: chartLeft,
                                type: this.curChartType,
                                isActive: false,
                                isMoreShow: false,
                                zIndex: this.zIndex,
                                xAxisValue: this.xAxisValue,
                                yAxisValue: this.yAxisValue,
                                title: this.titleText,
                                textData: this.textData,
                                textSize: this.textSize,
                                textColor: this.textColor,
                                prefix: this.prefix,
                                suffix: this.suffix,
                            }
                        )
                    }else if(this.curChartType === 'pie'){
                        
                        var pushData = {
                            vw: 400, // 四个值记录图表当前大小和位置
                            vh: 400,
                            top: chartTop,
                            left: chartLeft,
                            type: this.curChartType,
                            isActive: false,
                            isMoreShow: false,
                            zIndex: this.zIndex,
                            xAxisValue: this.xAxisValue,
                            yAxisValue: this.yAxisValue,
                            title: this.titleText,
                            chartData: {
                                title: [
                                    {
                                        x: 'center',
                                        text: this.titleText,
                                        textStyle: {
                                            textAlign: 'center',
                                            color: '#c7d0d9',
                                            fonrSize: 14,
                                            fontWeight: 100,
                                        }
                                    },
                                ],
                                tooltip: {
                                    trigger: 'item'
                                },
                                backgroundColor: '#141619',
                                // legend: {
                                //     orient: 'vertical',
                                //     left: 'center',
                                // },
                                series: [
                                    {
                                        name: this.xName,
                                        type: this.curChartType,
                                        radius: '50%',
                                        data: this.yPieAxisData,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            },
                        }
                        this.chartList.push(pushData)
                        this.initCharts()
                    }else{
                        // 竖轴数据去重，去除掉指标值后再提交
                        var arr = this.yAxisData
                        var result = []
                        var obj = {}
                        for(var i =0; i<arr.length; i++){
                            if(!obj[arr[i].code]){
                                result.push(arr[i])
                                obj[arr[i].code] = true
                            }
                        }
                        this.yAxisData = result

                        var pushData = {
                            vw: 400, // 四个值记录图表当前大小和位置
                            vh: 400,
                            top: chartTop,
                            left: chartLeft,
                            type: this.curChartType,
                            isActive: false,
                            isMoreShow: false,
                            zIndex: this.zIndex,
                            xAxisValue: this.xAxisValue,
                            yAxisValue: this.yAxisValue,
                            title: this.titleText,
                            chartData: {
                                title: [
                                    {
                                        x: 'center',
                                        text: this.titleText,
                                        textStyle: {
                                            textAlign: 'center',
                                            color: '#c7d0d9',
                                            fonrSize: 14,
                                            fontWeight: 100,
                                        }
                                    },
                                ],
                                tooltip: {
                                    trigger: 'axis'
                                },
                                backgroundColor: '#141619',
                                xAxis: {
                                    name: this.xName,
                                    type: 'category',
                                    data: this.xAxisData
                                },
                                yAxis: {
                                    name: this.yName,
                                    type: 'value'
                                },
                                series: this.yAxisData
                            },
                        }
                        this.chartList.push(pushData)
                        this.initCharts()
                    }

                    // 添加确定时存储当前信息
                    let chartInfoArr = []
                    if(this.curChartType === 'text'){
                        chartInfoArr = [
                            {
                                id: "",
                                code: this.code,
                                catalogId: this.catalogId,
                                positionId: "",
                                xzName: this.xName,
                                xzCode: this.xCode,
                                xzType: this.xType,
                                yzName: '',
                                yzCode: '',
                                yzType: '',
                            }
                        ]
                    }else if(this.curChartType === 'pie'){
                        chartInfoArr = [
                            {
                                id: "",
                                code: this.code,
                                catalogId: this.catalogId,
                                positionId: "",
                                xzName: this.xName,
                                xzCode: this.xCode,
                                xzType: this.xType,
                                yzName: this.yName,
                                yzCode: this.yCode,
                                yzType: this.yType,
                            }
                        ]
                    }else{
                        for(var item of this.yAxisData){
                            chartInfoArr.push(
                                {
                                    id: "",
                                    code: this.code,
                                    catalogId: this.catalogId,
                                    positionId: "",
                                    xzName: this.xName,
                                    xzCode: this.xCode,
                                    xzType: this.xType,
                                    yzName: item.name,
                                    yzCode: item.code,
                                    yzType: this.yType,
                                }
                            )
                        }
                    }
                    
                    if(this.curChartType === 'text'){
                        var chartWidth = parseInt((260 / this.clientWidth) * 100000000)
                        var chartHeight = parseInt((120 / this.clientHeight) * 100000000)
                        this.postList.push(
                            {
                                id: "",
                                code: this.code,
                                catalogId: this.catalogId,
                                dsCode: this.dsCode,
                                chartName: this.titleText,
                                chartType: this.curChartType,
                                chartLength: chartHeight,
                                chartWidth: chartWidth,
                                chartTop: chartTop,
                                chartLeft: chartLeft,
                                textSize: this.textSize,
                                textColor: this.textColor,
                                prefix: this.prefix,
                                suffix: this.suffix,
                                chartInfoList: chartInfoArr,
                                chartFilterList: this.chartFilterList,
                            }
                        )
                    }else{
                        var chartWidth = parseInt((400 / this.clientWidth) * 100000000)
                        var chartHeight = parseInt((400 / this.clientHeight) * 100000000)
                        this.postList.push(
                            {
                                id: "",
                                code: this.code,
                                catalogId: this.catalogId,
                                dsCode: this.dsCode,
                                chartName: this.titleText,
                                chartType: this.curChartType,
                                chartLength: chartHeight,
                                chartWidth: chartWidth,
                                chartTop: chartTop,
                                chartLeft: chartLeft,
                                textSize: this.textSize,
                                textColor: this.textColor,
                                prefix: this.prefix,
                                suffix: this.suffix,
                                chartInfoList: chartInfoArr,
                                chartFilterList: this.chartFilterList,
                            }
                        )
                    }
                    
                    // 保存(新建一个就保存一次)
                    if(this.postList.length > 0){
                        this.saveMeter()
                        this.hasSameTitle = false
                    }
                }              
            },
            // 仪表板关闭
            closeMeterEdit() {
                this.meterEditShow = false
                if(this.chartList.length > 0){
                    this.addAssemblyShow = false
                }else{
                    this.addAssemblyShow = true
                }
                // 更改当前模式为新建卡片模式
                this.addMode = true

                // this.getMeterList()
            },
            // 标题输入框失去焦点
            inputBlur() {
                for(var item of this.postList){
                    if(this.titleText === item.chartName){
                        this.$message.warning('当前标题已存在请修改！')
                        this.hasSameTitle = true
                    }else{
                        this.hasSameTitle = false
                    }
                }
            },
            // 横轴选择器（横轴只能选择一个）
            xHandleChange(value, e) {
                this.xAxisValue = value
                this.xName = this.xAxisList[e.key].title
                this.xCode = value
                this.xType = ''

                this.xAxisData = []
                for(var item of this.data){
                    this.xAxisData.push(item[this.xAxisValue])
                }

                // 横轴去重
                var arr = []
                for(var item of this.xAxisData){
                    if(arr.indexOf(item) < 0){
                        arr.push(item)
                    }
                }
                this.xAxisData = arr

                if(this.curChartType === 'text'){
                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        chartFilterList: this.chartFilterList,
                    }
                    getDSDetailsAll(params).then((res)=>{
                        if(res.success && res.result){
                            if(res.result.dsDetailList){
                                this.textData = res.result.dsDetailList
                            }else{
                                this.textData = '~'
                            }
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else if(this.curChartType === 'pie'){
                    if(this.yCode){
                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.yPieAxisData = res.result.dsDetailList
                                this.$nextTick(() => {
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }else{
                    if(this.yCode.length > 0){
                        if(typeof(this.yCode)  == 'string'){
                            this.yzCode = this.yCode
                        }else{
                            this.yzCode = this.yCode.join(',')
                        }

                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yzCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.data = res.result.dsDetailList

                                this.xAxisData = []
                                for(var item of this.data){
                                    this.xAxisData.push(item[this.xAxisValue])
                                }

                                // 横轴去重
                                var arr = []
                                for(var item of this.xAxisData){
                                    if(arr.indexOf(item) < 0){
                                        arr.push(item)
                                    }
                                }
                                this.xAxisData = arr

                                this.yAxisData = []
                                for(var yItem of this.yAxisValue){
                                    let arr = []
                                    for(var item of this.data){
                                        arr.push(item[yItem])
                                    }
                                    this.yAxisData.push({data: arr, type: this.curChartType, code: yItem})
                                } 
                                
                                for(var i=0;i<this.yAxisData.length;i++){
                                    this.yAxisData[i].name = this.yNameList[i]
                                }

                                // 指标
                                if(this.targList && this.targList.length > 0){
                                    var yArr = this.yAxisData
                                    var copyArr = []
                                    for(var item of yArr){
                                        for(var tItem of this.targList){
                                            if(item.code === tItem.dsFieldCode){
                                                var aLength = item.data.length
                                                let arr = []
                                                for(var i=0;i<aLength;i++){
                                                    arr.push(tItem.targIndex)
                                                }

                                                copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                            }
                                        }
                                    }
                                    this.yAxisData = yArr.concat(copyArr)
                                }

                                this.$nextTick(() => {
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            },
            // 竖轴选择器（竖轴可以选择多个）
            yHandleChange(value, e) {
                this.yAxisValue = value
                let yNameList = []
                for(var i=0;i<e.length;i++){
                    yNameList.push(this.yAxisList[e[i].key].title)
                }
                this.yCode = value
                this.yType = ''

                // 图表为饼图时将数据转化成饼图所需的数据格式
                this.yPieAxisData = []
                this.yAxisData = []

                if(this.curChartType === 'pie'){
                    if(this.yCode){
                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.yPieAxisData = res.result.dsDetailList
                                this.$nextTick(() => {
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }else{
                    if(this.yCode.length > 0){
                        if(typeof(this.yCode)  == 'string'){
                            this.yzCode = this.yCode
                        }else{
                            this.yzCode = this.yCode.join(',')
                        }

                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yzCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.data = res.result.dsDetailList

                                this.xAxisData = []
                                for(var item of this.data){
                                    this.xAxisData.push(item[this.xCode])
                                }

                                this.yAxisData = []
                                for(var yItem of value){
                                    let arr = []
                                    for(var item of this.data){
                                        arr.push(item[yItem])
                                    }
                                    this.yAxisData.push({data: arr, type: this.curChartType, code: yItem})
                                } 
                                
                                for(var i=0;i<this.yAxisData.length;i++){
                                    this.yAxisData[i].name = yNameList[i]
                                }

                                // 指标
                                if(this.targList && this.targList.length > 0){
                                    var yArr = this.yAxisData
                                    var copyArr = []
                                    for(var item of yArr){
                                        for(var tItem of this.targList){
                                            if(item.code === tItem.dsFieldCode){
                                                var aLength = item.data.length
                                                let arr = []
                                                for(var i=0;i<aLength;i++){
                                                    arr.push(tItem.targIndex)
                                                }

                                                copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                            }
                                        }
                                    }
                                    this.yAxisData = yArr.concat(copyArr)
                                }

                                this.$nextTick(() => {
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }

                if(this.curChartType !== 'text'){
                    // 清空画布
                    var myChart = echarts.init(document.getElementById("mainshow"))
                    myChart.clear()
                    this.initPreviewCharts()
                } 
            },
            // 选择图表类型
            selected(name, type, pic, index){
                this.chartTypeName = name;
                this.curChartType = type
                this.active = name
                // 用原生的方法给当前选中的图表类型加高亮状态
                var aUl = document.getElementsByClassName('chart_type_list')[0]
                var aLi = aUl.getElementsByTagName('li')
                for(var i=0;i<aLi.length;i++){
                    aUl.getElementsByTagName('li')[i].style.border = 'none'
                }
                aUl.getElementsByTagName('li')[index].style.border = '1px solid #3685f2'

                // 当前选择是文本类型时禁用竖轴
                if(this.curChartType === 'text'){
                    this.xDisabled = false
                    this.yDisabled = true

                    // 当所选类型时文本时横轴显示所有类型字段
                    this.xAxisList = this.columns
                    this.yAxisList = []
                }else{
                    this.xDisabled = false
                    this.yDisabled = false

                    if(this.curChartType === 'pie'){
                        this.selectMode = 'default'
                    }else{
                        this.selectMode = 'multiple'
                    }

                    // 过滤字段类型，横轴只能选择string和date,竖轴只能选择numeric
                    for(var item of this.columns){
                        for(var tItem of this.viewTypeList){
                            if(item.key === tItem.code){
                                item.viewType = tItem.viewType
                            }
                        }
                    }
                    this.xAxisList = this.columns.filter(v => v.viewType === 'string' | v.viewType === 'date')
                    this.yAxisList = this.columns.filter(v => v.viewType === 'numeric')

                    // 在编辑模式下判断当钱横轴数据类型是不是数值类型，是的话清空当前横轴数据(因为存在这样一种情况当前是文
                    // 本类型并且它选择了数值类型来展示，当它编辑成图表类型时，横轴不支持数值类型，所以要清空，再重新选择)
                    if(!this.addMode) {
                        var xAxisValueType = ''
                        for(var item of this.viewTypeList){
                            if(item.code === this.xAxisValue){
                                xAxisValueType = item.viewType
                            }
                        }
                        if(xAxisValueType === 'numeric'){
                            this.xAxisValue = ''
                        }
                    }
                }
                
                if(this.curChartType === 'text'){
                    let xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode

                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: xCode,
                        chartFilterList: this.chartFilterList,
                    }

                    getMeterDetails(params).then((res)=>{
                        if(res.success && res.result){
                            if(res.result.dsDetailList){
                                this.textData = res.result.dsDetailList
                            }else{
                                this.textData = ''
                            }
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else if(this.curChartType === 'pie'){
                    if(this.xAxisValue && this.yAxisValue){
                        let xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                        let yCode = this.postList[this.curChartIndex].chartInfoList[0].yzCode
                        
                        this.yPieAxisData = []

                        if(this.curChartType && xCode && yCode){
                            let params = {
                                dsCode: this.dsCode,
                                grade: this.grade,
                                code: this.code,
                                createTime_begin: this.createTime_begin,
                                createTime_end: this.createTime_end,
                                chartType: this.curChartType,
                                xzCode: xCode,
                                yzCode: yCode,
                                chartFilterList: this.chartFilterList,
                            }

                            getMeterDetails(params).then((res)=>{
                                if(res.success && res.result && res.result.dsDetailList){
                                    this.yPieAxisData = res.result.dsDetailList

                                    // 清空画布
                                    var myChart = echarts.init(document.getElementById("mainshow"))
                                    myChart.clear()
                                    this.$nextTick(() => {
                                        this.initPreviewCharts()
                                    })
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                    }
                    
                }else{
                    if(this.xAxisValue && this.yAxisValue){
                        let xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                        let yCode = this.postList[this.curChartIndex].chartInfoList[0].yzCode

                        this.xAxisData = []
                        this.yAxisData = []
                        this.yPieAxisData = []
                        for(var item of this.data){
                            this.xAxisData.push(item[xCode])
                        }

                        if(typeof(this.yCode)  == 'string'){
                            this.yzCode = this.yCode
                        }else{
                            this.yzCode = this.yCode.join(',')
                        }

                        let yNameList = []
                        for(var item of this.postList[this.curChartIndex].chartInfoList){
                            yNameList.push(item.yzName)
                        }
                        this.yNameList = yNameList

                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yzCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.data = res.result.dsDetailList
                                this.yAxisData = []

                                var value = this.yzCode.split(',')
                                for(var yItem of value){
                                    let arr = []
                                    for(var item of this.data){
                                        arr.push(item[yItem])
                                    }
                                    this.yAxisData.push({data: arr, type: this.curChartType, code: yItem})
                                } 

                                for(var i=0;i<this.yAxisData.length;i++){
                                    this.yAxisData[i].name = this.yNameList[i]
                                }

                                // 指标
                                if(this.targList && this.targList.length > 0){
                                    var yArr = this.yAxisData
                                    var copyArr = []
                                    for(var item of yArr){
                                        for(var tItem of this.targList){
                                            if(item.code === tItem.dsFieldCode){
                                                var aLength = item.data.length
                                                let arr = []
                                                for(var i=0;i<aLength;i++){
                                                    arr.push(tItem.targIndex)
                                                }

                                                copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                            }
                                        }
                                    }
                                    this.yAxisData = yArr.concat(copyArr)
                                }

                                this.$nextTick(() => {
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                    
                }            
            },
            // 文本字体大小
            fontSizeChange(value) {
                this.textSize = value
            },
            // 文本字体颜色
            textChangeColor(value) {
                this.textColor = value
            },
            // 添加条件
            addCondition() {
                this.addConditionFlag = true
                this.conditionVisible = true
                this.fieldCode = ''
                this.fieldName = ''
                this.fieldType = 'string'
                this.symbol = ''
                this.valBegin = ''
                this.valEnd = ''
                // 一个字段只能设置一次条件，在这里过滤掉已设置过条件的字段
                this.fieldList = this.fieldList.filter((x) => !this.chartFilterList.some((item) => x.code === item.fieldCode))
            },
            conditionHandleOk() {
                // 判断当前是添加过滤条件还是编辑过滤条件
                if(this.addConditionFlag){
                    this.chartFilterList.push(
                        {
                            fieldCode: this.fieldCode,
                            fieldName: this.fieldName,
                            fieldType: this.fieldType,
                            symbol: this.symbol,
                            valBegin: this.valBegin,
                            valEnd: this.valEnd,
                        }
                    )
                }else{
                    let conditionData = {
                        fieldCode: this.fieldCode,
                        fieldName: this.fieldName,
                        fieldType: this.fieldType,
                        symbol: this.symbol,
                        valBegin: this.valBegin,
                        valEnd: this.valEnd,
                    }
                    this.chartFilterList.splice(this.conditionIndex, 1, conditionData)
                }
                
                this.conditionVisible = false

                // 添加过滤条件后重新获取预览图表数据
                if(this.curChartType === 'text'){
                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        chartFilterList: this.chartFilterList,
                    }
                    getDSDetailsAll(params).then((res)=>{
                        if(res.success && res.result){
                            if(res.result.dsDetailList){
                                this.textData = res.result.dsDetailList
                            }else{
                                this.textData = '~'
                            }
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else if(this.curChartType === 'pie'){
                    
                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        yzCode: this.yCode,
                        chartFilterList: this.chartFilterList,
                    }

                    getMeterDetails(params).then((res)=>{
                        if(res.success && res.result && res.result.dsDetailList){
                            this.yPieAxisData = res.result.dsDetailList

                            this.$nextTick(() => {
                                var myChart = echarts.init(document.getElementById("mainshow"))
                                myChart.clear()
                                this.initPreviewCharts()
                            })
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else{
                    if(this.yCode.length > 0){
                        if(typeof(this.yCode)  == 'string'){
                            this.yzCode = this.yCode
                        }else{
                            this.yzCode = this.yCode.join(',')
                        }

                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yzCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.data = res.result.dsDetailList

                                this.xAxisData = []
                                for(var item of this.data){
                                    this.xAxisData.push(item[this.xAxisValue])
                                }

                                // 横轴去重
                                var arr = []
                                for(var item of this.xAxisData){
                                    if(arr.indexOf(item) < 0){
                                        arr.push(item)
                                    }
                                }
                                this.xAxisData = arr
                                
                                this.yAxisData = []
                                for(var yItem of this.yAxisValue){
                                    let arr = []
                                    for(var item of this.data){
                                        arr.push(item[yItem])
                                    }
                                    this.yAxisData.push({data: arr, type: this.curChartType, code: yItem})
                                } 
                                
                                for(var i=0;i<this.yAxisData.length;i++){
                                    this.yAxisData[i].name = this.yNameList[i]
                                }

                                // 指标
                                if(this.targList && this.targList.length > 0){
                                    var yArr = this.yAxisData
                                    var copyArr = []
                                    for(var item of yArr){
                                        for(var tItem of this.targList){
                                            if(item.code === tItem.dsFieldCode){
                                                var aLength = item.data.length
                                                let arr = []
                                                for(var i=0;i<aLength;i++){
                                                    arr.push(tItem.targIndex)
                                                }

                                                copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                            }
                                        }
                                    }
                                    this.yAxisData = yArr.concat(copyArr)
                                }

                                this.$nextTick(() => {
                                    var myChart = echarts.init(document.getElementById("mainshow"))
                                    myChart.clear()
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            },
            conditionHandleCancel() {
                this.conditionVisible = false
            },
            fieldTypeChange(value) {
                for(var item of this.fieldList){
                    if(item.code === value){
                        this.fieldCode = item.code
                        this.fieldName = item.name
                        this.fieldType = item.viewType
                    }
                }
                
                this.symbol = ''
                this.valBegin = ''
                this.valEnd = ''
                if(this.fieldType === 'string'){
                    this.symbol = 'eq'
                }else{
                    this.symbol = 'bewtee'
                }
            },
            fieldConditionChange(value) {
                this.symbol = value
                this.valBegin = ''
                this.valEnd = ''
                if(this.fieldType === 'date' && this.symbol === 'dynamic'){
                    this.valEnd = 'minute'
                }
            },
            startNumberChange(value) {
                this.valBegin = value
            },
            endNumberChange(value) {
                this.valEnd = value
            },
            startDateChange(value, dateString) {
                this.valBegin = dateString
            },
            startDateOk(value) {
                console.log('onOk: ', value);
            },
            endDateChange(value, dateString) {
                this.valEnd = dateString
            },
            timeNumberChange(value) {
                this.valBegin = value
            },
            timeTypeChange(value) {
                this.valEnd = value
            },
            endDateOk(value) {
                console.log('onOk: ', value);
            },
            editCondition(index) {
                this.conditionIndex = index
                this.addConditionFlag = false
                this.conditionVisible = true
                this.fieldCode = this.chartFilterList[index].fieldCode
                this.fieldName = this.chartFilterList[index].fieldName
                this.fieldType = this.chartFilterList[index].fieldType
                this.symbol = this.chartFilterList[index].symbol
                this.valBegin = this.chartFilterList[index].valBegin
                this.valEnd = this.chartFilterList[index].valEnd
            },
            deleteCondition(index) {
                this.chartFilterList.splice(index, 1)

                // 添加过滤条件后重新获取预览图表数据
                if(this.curChartType === 'text'){
                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        chartFilterList: this.chartFilterList,
                    }
                    getDSDetailsAll(params).then((res)=>{
                        if(res.success && res.result){
                            if(res.result.dsDetailList){
                                this.textData = res.result.dsDetailList
                            }else{
                                this.textData = '~'
                            }
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else if(this.curChartType === 'pie'){
                    
                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        yzCode: this.yCode,
                        chartFilterList: this.chartFilterList,
                    }

                    getMeterDetails(params).then((res)=>{
                        if(res.success && res.result && res.result.dsDetailList){
                            this.yPieAxisData = res.result.dsDetailList

                            this.$nextTick(() => {
                                var myChart = echarts.init(document.getElementById("mainshow"))
                                myChart.clear()
                                this.initPreviewCharts()
                            })
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else{
                    if(this.yCode.length > 0){
                        if(typeof(this.yCode)  == 'string'){
                            this.yzCode = this.yCode
                        }else{
                            this.yzCode = this.yCode.join(',')
                        }

                        let params = {
                            dsCode: this.dsCode,
                            grade: this.grade,
                            code: this.code,
                            createTime_begin: this.createTime_begin,
                            createTime_end: this.createTime_end,
                            chartType: this.curChartType,
                            xzCode: this.xCode,
                            yzCode: this.yzCode,
                            chartFilterList: this.chartFilterList,
                        }

                        getMeterDetails(params).then((res)=>{
                            if(res.success && res.result && res.result.dsDetailList){
                                this.data = res.result.dsDetailList

                                this.xAxisData = []
                                for(var item of this.data){
                                    this.xAxisData.push(item[this.xAxisValue])
                                }

                                // 横轴去重
                                var arr = []
                                for(var item of this.xAxisData){
                                    if(arr.indexOf(item) < 0){
                                        arr.push(item)
                                    }
                                }
                                this.xAxisData = arr
                                
                                this.yAxisData = []
                                for(var yItem of this.yAxisValue){
                                    let arr = []
                                    for(var item of this.data){
                                        arr.push(item[yItem])
                                    }
                                    this.yAxisData.push({data: arr, type: this.curChartType, code: yItem})
                                } 
                                
                                for(var i=0;i<this.yAxisData.length;i++){
                                    this.yAxisData[i].name = this.yNameList[i]
                                }

                                // 指标
                                if(this.targList && this.targList.length > 0){
                                    var yArr = this.yAxisData
                                    var copyArr = []
                                    for(var item of yArr){
                                        for(var tItem of this.targList){
                                            if(item.code === tItem.dsFieldCode){
                                                var aLength = item.data.length
                                                let arr = []
                                                for(var i=0;i<aLength;i++){
                                                    arr.push(tItem.targIndex)
                                                }

                                                copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                            }
                                        }
                                    }
                                    this.yAxisData = yArr.concat(copyArr)
                                }

                                this.$nextTick(() => {
                                    var myChart = echarts.init(document.getElementById("mainshow"))
                                    myChart.clear()
                                    this.initPreviewCharts()
                                })
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            },
            // 初始化echarts实例
            initCharts() {
                // dom节点渲染完成后初始化echarts实例
                this.$nextTick(() => {
                    for(var i=0;i<this.chartList.length;i++){
                        if(this.chartList[i].type !== 'text'){
                            var myChart = echarts.init(document.getElementById(`main${i}`))
                            myChart.setOption(this.chartList[i].chartData)
                        }
                    }
                })
            },
            // 选中卡片时获取当前操作卡片的下标
            activateEv(index) {
                this.historyShow = false

                this.curChartIndex = index
                for(var i=0;i<this.chartList.length;i++){
                    this.chartList[i].isMoreShow = false
                    this.chartList[i].isActive = false
                }
                this.chartList[this.curChartIndex].isMoreShow = true
                this.chartList[this.curChartIndex].isActive = true

                // 给选择的卡片添加最大的层级
                this.zIndex = this.zIndex + 1
                this.chartList[this.curChartIndex].zIndex = this.zIndex + 1
            },
            // 取消所有选中
            doDeselect() {
                for(var i=0;i<this.chartList.length;i++){
                    this.chartList[i].isMoreShow = false
                    this.chartList[i].isActive = false
                }

                this.historyShow = false
            },
            // 编辑卡片
            doEditChart(title) {
                this.historyShow = false

                // 通过标题获取下标
                for(var i=0; i<this.postList.length; i++){
                    if(this.postList[i].chartName === title){
                        this.curChartIndex = i
                    }
                }

                // 给提交数组重新排序
                var list = []
                for(var i=0;i<this.chartList.length;i++){
                    for(var j=0;j<this.postList.length;j++){
                        if(this.chartList[i].title === this.postList[j].chartName){
                            list.push(this.postList[j])
                        }
                    }
                }
                this.postList = list

                this.curChartType = this.postList[this.curChartIndex].chartType

                for(var item of this.chartType){
                    if(item.type === this.curChartType){
                        this.chartTypeName = item.name
                    }
                }

                // 更改当前模式为编辑卡片模式
                this.addMode = false
                // 打开卡片编辑面板
                this.meterEditShow = true

                this.dsCode = this.postList[this.curChartIndex].dsCode

                if(this.postList[this.curChartIndex].chartFilterList && this.postList[this.curChartIndex].chartFilterList.length > 0){
                    this.chartFilterList = this.postList[this.curChartIndex].chartFilterList
                    // 一个字段只能设置一次条件，在这里过滤掉已设置过条件的字段
                    this.fieldList = this.fieldList.filter((x) => !this.chartFilterList.some((item) => x.code === item.fieldCode))
                }else{
                    this.chartFilterList = []
                }
                
                // 数据源名称
                let param = {
                    name: '',
                }
                getDataSource(param).then((res)=>{
                    if(res.success){
                        this.treeData = res.result
                        for(var item of this.treeData){
                            for(var childItem of item.dsConfList){
                                if(this.dsCode === childItem.dsCode){
                                    this.dsName = childItem.dsName
                                }
                            }
                        }
                    }else{
                        this.$message.warning(res.message)
                    }
                })
                
                // 获取横轴、竖轴选项
                let params = {
                    dsCode: this.dsCode
                }
                getMeterDetails(params).then((res)=>{
                    if(res.success && res.result && res.result.dsDetailTitleMap){
                        let arr = []
                        for(let i in res.result.dsDetailTitleMap){
                            arr.push({title: res.result.dsDetailTitleMap[i], key: i, dataIndex: i, align: 'center',})
                        }
                        this.columns = arr.filter(v => v.title !== '')

                        getFieldList(params).then((res)=>{
                            if(res.success && res.result){
                                this.viewTypeList = res.result
                                this.fieldList = res.result
                                if(this.curChartType === 'text'){
                                    this.xAxisList = this.columns
                                    this.yAxisList = []
                                }else{
                                    // 过滤字段类型，横轴只能选择string和date,竖轴只能选择numeric
                                    for(var item of this.columns){
                                        for(var tItem of this.viewTypeList){
                                            if(item.key === tItem.code){
                                                item.viewType = tItem.viewType
                                            }
                                        }
                                    }
                                    this.xAxisList = this.columns.filter(v => v.viewType === 'string' | v.viewType === 'date')
                                    this.yAxisList = this.columns.filter(v => v.viewType === 'numeric')

                                }
                                
                            }else{
                                this.$message.warning(res.message)
                            }
                        })

                    }else{
                        this.$message.warning(res.message)
                    }
                })

                // 当前选择是文本类型时禁用竖轴
                if(this.curChartType === 'text'){
                    this.xDisabled = false
                    this.yDisabled = true

                    this.id = this.postList[this.curChartIndex].id
                    this.titleText = this.postList[this.curChartIndex].chartName
                    this.curChartType = this.postList[this.curChartIndex].chartType
                    this.dsCode = this.postList[this.curChartIndex].dsCode
                    this.xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                    this.xType = ''
                    this.xName = this.postList[this.curChartIndex].chartInfoList[0].xzName
                    this.yCode = ''
                    this.yName = ''
                    this.yType = ''

                    this.textSize = this.postList[this.curChartIndex].textSize
                    if(this.postList[this.curChartIndex].textColor){
                        this.textColor = this.postList[this.curChartIndex].textColor
                    }else{
                        this.textColor = '#f2a654'
                    }
                    this.prefix = this.postList[this.curChartIndex].prefix
                    this.suffix = this.postList[this.curChartIndex].suffix
                }else if(this.curChartType === 'pie'){
                    this.xDisabled = false
                    this.yDisabled = false

                    this.selectMode = 'default'

                    this.id = this.postList[this.curChartIndex].id
                    this.titleText = this.postList[this.curChartIndex].chartName
                    this.curChartType = this.postList[this.curChartIndex].chartType
                    this.dsCode = this.postList[this.curChartIndex].dsCode
                    this.xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                    this.xType = ''
                    this.yType = ''
                    this.xName = this.postList[this.curChartIndex].chartInfoList[0].xzName
                    this.yCode = this.postList[this.curChartIndex].chartInfoList[0].yzCode
                    this.yName = this.postList[this.curChartIndex].chartInfoList[0].yzName
                }else{
                    this.xDisabled = false
                    this.yDisabled = false

                    this.selectMode = 'multiple'

                    this.id = this.postList[this.curChartIndex].id
                    this.titleText = this.postList[this.curChartIndex].chartName
                    this.curChartType = this.postList[this.curChartIndex].chartType
                    this.dsCode = this.postList[this.curChartIndex].dsCode
                    this.xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                    this.xType = ''
                    
                    this.xName = this.postList[this.curChartIndex].chartInfoList[0].xzName
                    this.yName = this.postList[this.curChartIndex].chartInfoList[0].yzName
                    this.yType = ''

                    var yCodeList = this.postList[this.curChartIndex].chartInfoList
                    var yCodeArr = []
                    for(var item of yCodeList){
                        yCodeArr.push(item.yzCode)
                    }
                    this.yCode = yCodeArr.join(',')
                }

                if(this.curChartType === 'text'){
                    this.xAxisValue = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                    this.yAxisValue = []

                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        chartFilterList: this.chartFilterList,
                    }

                    getMeterDetails(params).then((res)=>{
                        if(res.success && res.result){
                            if(res.result.dsDetailList){
                                this.textData = res.result.dsDetailList
                            }else{
                                this.textData = '~'
                            }
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else if(this.curChartType === 'pie'){
                    this.xAxisValue = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                    this.yAxisValue = this.postList[this.curChartIndex].chartInfoList[0].yzCode

                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        yzCode: this.yCode,
                        chartFilterList: this.chartFilterList,
                    }

                    getMeterDetails(params).then((res)=>{
                        if(res.success && res.result && res.result.dsDetailList){
                            this.yPieAxisData = res.result.dsDetailList

                            this.$nextTick(() => {
                                this.initPreviewCharts()
                            })
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else{
                    let yNameList = []
                    for(var item of this.postList[this.curChartIndex].chartInfoList){
                        yNameList.push(item.yzName)
                    }
                    this.yNameList = yNameList

                    this.xAxisValue = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                    
                    var chartInfo = this.postList[this.curChartIndex].chartInfoList

                    if(this.curChartType === 'pie'){
                        this.yAxisValue = (chartInfo[0].yzCode).split(',')
                    }else{
                        this.yAxisValue = []
                        for(var item of chartInfo){
                            this.yAxisValue.push(item.yzCode)
                        }
                    }
                    
                    // 竖轴去重，去掉指标
                    var array = []
                    for (var i = 0; i < this.yAxisValue.length; i++) {
                        if (array.indexOf(this.yAxisValue[i]) === -1) {
                            array.push(this.yAxisValue[i])
                        }
                    }
                    this.yAxisValue = array

                    if(this.curChartType === 'text'){
                        this.yAxisValue = []
                    }else{
                        this.yAxisValue = array
                    }
                    
                    let params = {
                        dsCode: this.dsCode,
                        grade: this.grade,
                        code: this.code,
                        createTime_begin: this.createTime_begin,
                        createTime_end: this.createTime_end,
                        chartType: this.curChartType,
                        xzCode: this.xCode,
                        yzCode: this.yCode,
                        chartFilterList: this.chartFilterList,
                    }
                    getMeterDetails(params).then((res)=>{
                        if(res.success && res.result && res.result.dsDetailTitleMap){
                            let arr = []
                            for(let i in res.result.dsDetailTitleMap){
                                arr.push({title: res.result.dsDetailTitleMap[i], key: i, dataIndex: i, align: 'center',})
                            }
                            this.columns = arr.filter(v => v.title !== '')

                            getFieldList(params).then((res)=>{
                                if(res.success && res.result){
                                    this.viewTypeList = res.result

                                    if(this.curChartType === 'text'){
                                        this.xAxisList = this.columns
                                        this.yAxisList = []
                                    }else{
                                        // 过滤字段类型，横轴只能选择string和date,竖轴只能选择numeric
                                        for(var item of this.columns){
                                            for(var tItem of this.viewTypeList){
                                                if(item.key === tItem.code){
                                                    item.viewType = tItem.viewType
                                                }
                                            }
                                        }
                                        this.xAxisList = this.columns.filter(v => v.viewType === 'string' | v.viewType === 'date')
                                        this.yAxisList = this.columns.filter(v => v.viewType === 'numeric')

                                    }
                                    
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })

                            // 编辑时设置当前编辑图表的数据
                            if(res.result.dsDetailList){
                                this.data = res.result.dsDetailList
                                let xCode = this.postList[this.curChartIndex].chartInfoList[0].xzCode
                                let yName = this.postList[this.curChartIndex].chartInfoList[0].yzName
                                this.xAxisData = []
                                this.yAxisData = []

                                for(var item of res.result.dsDetailList){
                                    this.xAxisData.push(item[xCode])
                                }
                                
                                for(var cItem of this.yAxisValue){
                                    var yData = []
                                    for(var item of res.result.dsDetailList){
                                        yData.push(item[cItem])
                                    }
                                    this.yAxisData.push({code: cItem, type: this.curChartType, data: yData})
                                }

                                for(var i=0;i<this.yAxisData.length;i++){
                                    this.yAxisData[i].name = yNameList[i]
                                }

                                // 指标
                                this.targList = this.allTargList[this.curChartIndex].targList
                                if(this.targList && this.targList.length > 0){
                                    var yArr = this.yAxisData
                                    var copyArr = []
                                    for(var item of yArr){
                                        for(var tItem of this.targList){
                                            if(item.code === tItem.dsFieldCode){
                                                var aLength = item.data.length
                                                let arr = []
                                                for(var i=0;i<aLength;i++){
                                                    arr.push(tItem.targIndex)
                                                }
                                                copyArr.push({data: arr, type: 'line', code: item.code, name: item.name})
                                            }
                                        }
                                    }
                                    this.yAxisData = yArr.concat(copyArr)
                                }

                                this.$nextTick(() => {
                                    this.initPreviewCharts()
                                })
                            }
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }

                // 重置当前图表类型的选中状态，不然他会显示上一次选中的图表类型，导致视觉上的错误
                this.$nextTick(() => {
                    for(var i=0;i<this.chartType.length;i++){
                        if(this.curChartType === this.chartType[i].type){
                            document.getElementsByClassName('chart_type_list')[0].getElementsByTagName('li')[i].style.border = '1px solid #3685f2'
                        }
                    }
                })
                
            },
            // 卡片编辑保存
            saveMeterEdit() {
                if(this.hasSameTitle){
                    this.$message.warning('当前标题已存在请修改！')
                }else{
                    // 更改当前模式为新建卡片模式
                    this.addMode = true
                    
                    if(this.curChartType === 'text'){
                        var saveData = {
                            vw: this.chartList[this.curChartIndex].vw,
                            vh: this.chartList[this.curChartIndex].vh,
                            top: this.chartList[this.curChartIndex].top,
                            left: this.chartList[this.curChartIndex].left,
                            type: this.curChartType,
                            isActive: false,
                            isMoreShow: false,
                            zIndex: this.zIndex,
                            xAxisValue: this.chartList[this.curChartIndex].xAxisValue,
                            yAxisValue: this.chartList[this.curChartIndex].yAxisValue,
                            title: this.titleText,
                            textSize: this.textSize,
                            textColor: this.textColor,
                            prefix: this.prefix,
                            suffix: this.suffix,
                            textData: this.textData,
                        }
                        this.chartList.splice(this.curChartIndex, 1, saveData)

                        // 从图表变为文本时，图表的div不知道怎么的还是显示在这里，运用原生的方法移除当前图表div
                        var divList = document.getElementById(`main${this.curChartIndex}`).getElementsByTagName('div')
                        if(divList.length > 0){
                            divList[0].style.display = 'none'
                        }

                    }else if(this.curChartType === 'pie'){
                        var saveData = {
                            vw: this.chartList[this.curChartIndex].vw,
                            vh: this.chartList[this.curChartIndex].vh,
                            top: this.chartList[this.curChartIndex].top,
                            left: this.chartList[this.curChartIndex].left,
                            type: this.curChartType,
                            isActive: false,
                            isMoreShow: false,
                            zIndex: this.zIndex,
                            xAxisValue: this.chartList[this.curChartIndex].xAxisValue,
                            yAxisValue: this.chartList[this.curChartIndex].yAxisValue,
                            title: this.titleText,
                            chartData: {
                                title: [
                                    {
                                        x: 'center',
                                        text: this.titleText,
                                        textStyle: {
                                            textAlign: 'center',
                                            color: '#c7d0d9',
                                            fonrSize: 14,
                                            fontWeight: 100,
                                        }
                                    },
                                ],
                                tooltip: {
                                    trigger: 'item'
                                },
                                backgroundColor: '#141619',
                                series: [{
                                    data: this.yPieAxisData,
                                    type: this.curChartType
                                }]
                            },
                        }
                        this.chartList.splice(this.curChartIndex, 1, saveData)
                        this.$nextTick(() => {
                            this.initCharts()
                        })
                    }else{
                        var saveData = {
                            vw: this.chartList[this.curChartIndex].vw,
                            vh: this.chartList[this.curChartIndex].vh,
                            top: this.chartList[this.curChartIndex].top,
                            left: this.chartList[this.curChartIndex].left,
                            type: this.curChartType,
                            isActive: false,
                            isMoreShow: false,
                            zIndex: this.zIndex,
                            xAxisValue: this.chartList[this.curChartIndex].xAxisValue,
                            yAxisValue: this.chartList[this.curChartIndex].yAxisValue,
                            title: this.titleText,
                            chartData: {
                                title: [
                                    {
                                        x: 'center',
                                        text: this.titleText,
                                        textStyle: {
                                            textAlign: 'center',
                                            color: '#c7d0d9',
                                            fonrSize: 14,
                                            fontWeight: 100,
                                        }
                                    },
                                ],
                                tooltip: {
                                    trigger: 'axis'
                                },
                                backgroundColor: '#141619',
                                xAxis: {
                                    type: 'category',
                                    data: this.xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: this.yAxisData
                            },
                        }
                        this.chartList.splice(this.curChartIndex, 1, saveData)
                        
                        // 清空画布
                        for(var i=0;i<this.chartList.length;i++){
                            if(this.chartList[i].type !== 'text'){
                                var myChart = echarts.init(document.getElementById(`main${i}`))
                                myChart.clear()
                            }
                        }

                        this.$nextTick(() => {
                            this.initCharts()
                        })
                    }

                    // 添加确定时存储当前信息
                    let chartInfoArr = []
                    if(this.curChartType === 'text'){
                        chartInfoArr.push(
                            {
                                id: "",
                                code: this.code,
                                catalogId: this.catalogId,
                                positionId: "",
                                xzName: this.xName,
                                xzCode: this.xCode,
                                xzType: this.xType,
                                yzName: '',
                                yzCode: '',
                                yzType: '',
                            }
                        )
                    }else if(this.curChartType === 'pie'){
                        chartInfoArr.push(
                            {
                                id: "",
                                code: this.code,
                                catalogId: this.catalogId,
                                positionId: "",
                                xzName: this.xName,
                                xzCode: this.xCode,
                                xzType: this.xType,
                                yzName: this.yName,
                                yzCode: this.yCode,
                                yzType: this.yType,
                            }
                        )
                    }else{

                        // 竖轴数据去重，去除掉指标值后再提交
                        var arr = this.yAxisData
                        var result = []
                        var obj = {}
                        for(var i =0; i<arr.length; i++){
                            if(!obj[arr[i].code]){
                                result.push(arr[i])
                                obj[arr[i].code] = true
                            }
                        }
                        this.yAxisData = result

                        for(var item of this.yAxisData){
                            chartInfoArr.push(
                                {
                                    id: "",
                                    code: this.code,
                                    catalogId: this.catalogId,
                                    positionId: "",
                                    xzName: this.xName,
                                    xzCode: this.xCode,
                                    xzType: this.xType,
                                    yzName: item.name,
                                    yzCode: item.code,
                                    yzType: this.yType,
                                }
                            )
                        }
                    }

                    var postData = {
                        id: this.id,
                        code: this.code,
                        catalogId: this.catalogId,
                        dsCode: this.dsCode,
                        chartName: this.titleText,
                        chartType: this.curChartType,
                        chartLength: this.postList[this.curChartIndex].chartLength,
                        chartWidth: this.postList[this.curChartIndex].chartWidth,
                        chartTop: this.postList[this.curChartIndex].chartTop,
                        chartLeft: this.postList[this.curChartIndex].chartLeft,
                        textSize: this.textSize,
                        textColor: this.textColor,
                        prefix: this.prefix,
                        suffix: this.suffix,
                        chartInfoList: chartInfoArr,
                        chartFilterList: this.chartFilterList,
                    }
                    this.postList.splice(this.curChartIndex, 1, postData)

                    // 关闭卡片编辑面板
                    this.meterEditShow = false 

                    // 保存(新建一个就保存一次)
                    if(this.postList.length > 0){
                        this.saveMeter()
                        this.hasSameTitle = false
                    }
                }
                      
            },
            // 删除卡片
            doDeleteChart(title) {
                this.historyShow = false

                for(var i=0; i<this.postList.length; i++){
                    if(this.postList[i].chartName === title){
                        this.curChartIndex = i
                    }
                }

                this.chartList.splice(this.curChartIndex, 1)
                this.postList.splice(this.curChartIndex, 1)
            },
            // 卡片拖拽缩放
            resize(newRect) {
                this.chartList[this.curChartIndex].vw = newRect.width
                this.chartList[this.curChartIndex].vh = newRect.height
                this.chartList[this.curChartIndex].top = newRect.top
                this.chartList[this.curChartIndex].left = newRect.left
                // this.chartList[this.curChartIndex].vw = (Math.round(newRect.width / 10)) * 10
                // this.chartList[this.curChartIndex].vh = (Math.round(newRect.height / 10)) * 10
                // this.chartList[this.curChartIndex].top = (Math.round(newRect.top / 10)) * 10
                // this.chartList[this.curChartIndex].left = (Math.round(newRect.left / 10)) * 10

                // 根据卡片大小设置当前图表大小
                this.$nextTick(() => {
                    // 只有当前类型是图表的时候才实例化
                    if(this.chartList[this.curChartIndex].type !== 'text'){
                        var myChart = echarts.init(document.getElementById(`main${this.curChartIndex}`))
                        myChart.resize({
                            width: newRect.width + 'px',
                            height: newRect.height + 'px'
                        })
                    }
                })
                
                // 给提交数组重新排序
                var list = []
                for(var i=0;i<this.chartList.length;i++){
                    for(var j=0;j<this.postList.length;j++){
                        if(this.chartList[i].title === this.postList[j].chartName){
                            list.push(this.postList[j])
                        }
                    }
                }
                this.postList = list

                this.postList[this.curChartIndex].chartWidth = parseInt((newRect.width / this.clientWidth) * 100000000)
                this.postList[this.curChartIndex].chartLength = parseInt((newRect.height / this.clientHeight) * 100000000)
                this.postList[this.curChartIndex].chartTop = parseInt((newRect.top / this.clientHeight) * 100000000)
                this.postList[this.curChartIndex].chartLeft = parseInt((newRect.left / this.clientWidth) * 100000000)
            },

            // checkbox
            onChange(e) {
                console.log(`checked = ${e.target.checked}`);
            },
            
            // 预览仪表板
            goPreviewMode() {
                if(this.chartList.length > 0){
                    this.isSideBarShow = !this.isSideBarShow
                    this.isDraggable = !this.isDraggable
                    this.isResizable = !this.isResizable
                    this.previewMode = !this.previewMode
                    if(this.previewMode){
                        this.filterWidth = '100%'
                        this.filterMargin = '0'
                    }else{
                        this.filterWidth = 'calc(100% - 60px)'
                        this.filterMargin = '60px'
                    }
                }else{
                    this.$message.warning('请至少添加一张卡片之后再预览！');
                }

                this.historyShow = false
            },
            // 初始化预览模块图表
            initPreviewCharts() {
                // dom节点渲染完成后初始化echarts实例
                var myChart = echarts.init(document.getElementById("mainshow"))
                if(this.curChartType === 'pie'){
                    var chartData = {
                        title: [
                            {
                                x: 'center',
                                text: this.titleText,
                                textStyle: {
                                    textAlign: 'center',
                                    color: '#c7d0d9',
                                    fonrSize: 14,
                                    fontWeight: 100,
                                }
                            },
                        ],
                        tooltip: {
                            trigger: 'item'
                        },
                        backgroundColor: '#141619',
                        // legend: {
                        //     orient: 'vertical',
                        //     left: 'center',
                        // },
                        series: [
                            {
                                name: this.xName,
                                type: this.curChartType,
                                radius: '50%',
                                data: this.yPieAxisData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }
                }else{
                    var chartData = {
                        title: [
                            {
                                x: 'left',
                                text: this.titleText,
                                textStyle: {
                                    textAlign: 'center',
                                    color: '#c7d0d9',
                                    fonrSize: 14,
                                    fontWeight: 100,
                                }
                            },
                        ],
                        backgroundColor: '#141619',
                        xAxis: {
                            type: 'category',
                            data: this.xAxisData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: this.yAxisData
                    }
                }
                
                myChart.setOption(chartData)
            },
            
        },
    }
</script>

<style lang="less" scoped>
    .newMeter{
        width: 100%;
        height: 100%;
        font-style: Microsoft YaHei;
        font-size: 14px;
        background: #ffffff;
        ul{
            li{
                list-style: none;
            }
        }
        .top_operation{
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #e8eaed;
            line-height: 40px;
            ul{
                width: 100%;
                height: 100%;
                margin-top: 16px;
                position: relative;
                li{
                    float: left;
                    margin-right: 46px;
                    cursor: pointer;
                    position: relative;
                    padding-left: 22px;
                    img{
                        width: 20px;
                        position: absolute;
                        left: 0;
                        top: 10px;
                    }
                }
                li:last-child{
                    float: right;
                    img{
                        top: 11px;
                    }
                }
                .historyList{
                    position: absolute;
                    top: 40px;
                    left: 60px;
                    z-index: 12;
                    width: 400px;
                    height: 500px;
                    overflow: auto;
                    border-radius: 5px;
                    background: #ffffff;
                    border: 1px solid #e8eaed;
                    .historyEdition{
                        width: 100%;
                        height: 60px;
                        text-align: center;
                        p{
                            height: 10px;
                        }
                    }
                    .historyEdition:hover{
                        background: #d4d7de;
                    }
                }
                .resetEdition{
                    width: 120PX;
                    height: 30PX;
                    border-radius: 3px;
                    background: #f8ac59;
                    margin: 5px 0 0 30rem;
                    line-height: 30px;
                    color: #ffffff;
                    text-align: center;
                    padding-left: 0;
                    cursor: pointer;
                }
                .cancelReset{
                    width: 120PX;
                    height: 30PX;
                    border-radius: 3px;
                    background: #f8ac59;
                    margin: 5px 0 0 20px;
                    line-height: 30px;
                    color: #ffffff;
                    text-align: center;
                    padding-left: 0;
                    cursor: pointer;
                }
            }
        }
        .filter_bar{
            height: 52px;
            background: #ffffff;
            padding: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #e8eaed;
            padding-left: 16px;
            .filter_time{
                float: left;
                margin-right: 20px;
            }
            .every_operation{
                float: left;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
        }
        .main{
            width: 100%;
            // height: calc(100% - 40px);
            background: #0b0c0e;
            position: relative;
            display: flex;
            .side_bar{
                width: 60px;
                height: 100%;
                background: #ffffff;
                border-right:1px solid #e8eaed;
                ul{
                    li{
                        width: 60px;
                        height: 160px;
                        padding-top: 38px;
                        margin-top: 50px;
                        margin-left: -40px;
                        position: relative;
                        cursor: pointer;
                        text-align: center;
                        border-bottom: 1px solid #e8eaed;
                        img{
                            width: 20px;
                        }
                    }
                }
            }
            
            .add_assembly{
                width: 150px;
                height: 150px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -75px;
                margin-left: -75px;
                background: #ffffff;
                text-align: center;
                padding: 30px 0;
                cursor: pointer;
                p{
                    color: #3d4d66;
                    margin-top: 40px;
                }
            }
            .active{
                box-shadow: 0px 0px 10px #000;
            }
            .chart_list{
                flex: 1;
                min-height: 800px;
                background: #0b0c0e;
                padding: 10px;
                position: relative;
                overflow: auto;
                .chart_list_li{
                    position: absolute;
                    /deep/ .text_container{
                        width: 100%;
                        height: 100%;
                        background: #141619;
                        border: 1px solid #202226;
                        // border-radius: 3px;
                        box-sizing: border-box;
                        text-align: center;
                        h5{
                            height: 40px;
                            font-size: 18px;
                            color: #c7d0d9;
                            line-height: 40px;
                        }
                        p{
                            height: 70px;
                            font-size: 16px;
                            color: #c7d0d9;
                            line-height: 50px;
                        }
                    }
                    /deep/ .main_container{
                        border: 1px solid #202226;
                        // border-radius: 3px;
                        box-sizing: border-box;
                    }
                    /deep/ .main_more{
                        width: 60px;
                        height: 30px;
                        position: absolute;
                        left: 0;
                        bottom: -5px;
                        div{
                            width: 25px;
                            height: 25px;
                            float: left;
                            background: #141619;
                            border-top: none;
                            text-align: center;
                            cursor: pointer;
                            img{
                                width: 16px;
                            }
                        }
                        .main_more_edit{
                            border: 1px solid #ffffff;
                        }
                        .main_more_delete{
                            border: 1px solid #ffffff;
                        }
                    }
                }
            }
        }
        .meter_edit{
            width: 100%;
            height: 100%;
            background: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            .meter_btn_top{
                width: 100%;
                height: 50px;
                padding: 0 20px;
                line-height: 50px;
                border-bottom: 1px solid #e8eaed;
                .close_btn,.confirm_btn{
                    width: 100px;
                    height: 30px;
                    margin-left: 20px;
                    background: #3685f2;
                    float: right;
                    margin-top: 10px;
                    border-radius: 3px;
                    color: #ffffff;
                    line-height: 30px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            .meter_edit_main{
                width: 100%;
                height: calc(100% - 50px);
                margin-top: -5px;
                display: flex;
                .edit_main_left{
                    width: 240px;
                    height: 100%;
                    padding: 20px;
                    border-right: 1px solid #e8eaed;
                    p{
                        span{
                            font-size: 22px;
                            color: #f5222d;
                            display: block;
                            float: left;
                            margin-top: -2px;
                        }
                    }
                    button{
                        width: 180px;
                        text-align: left;
                        background: #ffffff;
                        border: 1px solid #e8eaed;
                        border-radius: 3px;
                    }
                    ul.chart_type_list{
                        width: 260px;
                        margin-left: -40px;
                        overflow: hidden;
                        li{
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            padding-top: 7px;
                            border-radius: 3px;
                            box-sizing: border-box;
                            float: left;
                            margin: 0 13px 10px 0;
                            cursor: pointer;
                            img{
                                width: 20px;
                            }
                        }
                        li:hover{
                            border: 1px solid #3685f2;
                        }
                        .typeActive{
                            border: 1px solid #3685f2;
                        }
                    }
                    .chartTypeDesc{
                        display: block;
                        height: 21px;
                        margin-top: -11px;
                        color: #a8b0bb;
                    }
                    ul.chart_style_list{
                        margin-left: -30px;
                        li{
                            margin-bottom: 5px;
                        }
                    }
                    .style_set_div{
                        margin-top: 12px;
                        position: relative;
                        span{
                            margin-right: 20px
                        }
                        .style_set_color{
                            width: 25px;
                            height: 25px;
                            border: 1px solid #000000;
                            position: absolute;
                            top: -2px;
                            left: 48px;
                            /deep/ .m-colorPicker .colorBtn{
                                width: 19px;
                                height: 19px;
                                margin: 2px 0 0 2px;
                            }
                        }
                    }
                }
                .edit_main_center{
                    width: 240px;
                    height: 100%;
                    padding: 20px;
                    border-right: 1px solid #e8eaed;
                    button{
                        width: 100px;
                        height: 30px;
                        background: #3685f2;
                        border-radius: 3px;
                        border: none;
                        color: #ffffff;
                        line-height: 26px;
                        text-align: center;
                        cursor: pointer;
                    }
                    .condition_list{
                        margin-top: 20px;
                        .condition_list_li{
                            width: 180px;
                            height: 30px;
                            margin-bottom: 20px;
                            line-height: 28px;
                            border: 1px solid #9ea6b2;
                            border-radius: 3px;
                            .filter_img{
                                width: 20px;
                                margin: -2px 0 0 10px;
                            }
                            span{
                                margin-left: 8px;
                            }
                            .more_img{
                                width: 16px;
                                float: right;
                                margin: 7px 10px 0 0;
                                cursor: pointer;
                            }

                        }
                    }
                }
                .edit_main_right{
                    flex: 1;
                    padding: 20px;
                    .main_right_top{
                        border-bottom: 1px solid #e8eaed;
                        .select_data{
                            margin-bottom: 20px;
                            span{
                                padding-right: 20px;
                            }
                        }
                    }
                    .main_right_bottom{
                        width: 100%;
                        height: calc(100% - 175px);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .chart_type_tip{
                            width: 120px;
                            height: 120px;
                            text-align: center;
                            img{
                                width: 80px;
                            }
                            p{
                                font-size: 14px;
                                margin-top: 10px;
                                color: #a8b0bb;
                            }
                        }
                        .text_data_div{
                            width: 260px;
                            height: 120px;
                            border-radius: 3px;
                            background: #141619;
                            text-align: center;
                            h5{
                                height: 40px;
                                font-size: 16px;
                                font-weight: bold;
                                color: #ffffff;
                                line-height: 40px;
                            }
                            p{
                                height: 70px;
                                font-size: 16px;
                                color: #ffffff;
                                line-height: 50px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>